import { Row, Col, Button, Checkbox, Form, Input, Space, message } from "antd";
import { userLoginApi } from "@/apis/user/user";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";

const Login = () => {
  const navigate = useNavigate();
  const loginFormStyle = { marginTop: "100px" };
  // const [api] = notification.useNotification();
  const [messageApi] = message.useMessage();
  const [errorMessage, setErrorMessage] = useState("");
  useEffect(() => {
    if (errorMessage) {
      alert(errorMessage);
    }
  }, [errorMessage]);
  const onFinish = (values) => {
    userLoginApi(values).then((res) => {
      if (res.code !== 200) {
        // 右上角弹出 Message
        setErrorMessage(res.message);
        return;
      }
      let token = res.data.token;
      localStorage.setItem("token", token);
      localStorage.setItem("username", values.username);
      navigate("/dashboard");
    });
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed: ", errorInfo);
  };
  const testNote = () => {
    messageApi.info("Hello, Ant Design!");
  };
  return (
    <div className="login">
      <Row>
        <Col span={8}></Col>
        <Col span={8}>
          <div style={loginFormStyle}>
            <Form
              name="basic"
              labelCol={{
                span: 6,
              }}
              wrapperCol={{
                span: 18,
              }}
              style={{
                maxWidth: 600,
              }}
              initialValues={{
                remember: true,
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                label="Username"
                name="username"
                rules={[
                  {
                    required: true,
                    message: "Please input your username!",
                  },
                ]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="Password"
                name="password"
                rules={[
                  {
                    required: true,
                    message: "Please input your password!",
                  },
                ]}
              >
                <Input.Password />
              </Form.Item>

              <Form.Item
                name="remember"
                valuePropName="checked"
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Checkbox>Remember me</Checkbox>
              </Form.Item>

              <Form.Item
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Space>
                  <Button type="primary" htmlType="submit">
                    Submit
                  </Button>
                  <Button type="default" onClick={testNote}>
                    Test
                  </Button>
                </Space>
              </Form.Item>
            </Form>
          </div>
        </Col>
        <Col span={8}></Col>
      </Row>
    </div>
  );
};

export default Login;
